import React, {useState} from 'react';
import {Menu} from 'antd';
import { MailOutlined, AppstoreOutlined, UserAddOutlined } from '@ant-design/icons';

const MenuTop = () => {
    const [current, setCurrent] = useState('1');

    function handleClick(e: any) {
        if(e.key !== 'logo') {
            setCurrent(e.key)
        }
    }

    return (
        <>
            <Menu onClick={(e)=>handleClick(e)} selectedKeys={[current]} mode="horizontal" theme="dark">
                <Menu.Item key="logo">
                    <div>logo</div>
                </Menu.Item>
                <Menu.Item key="mail" icon={<MailOutlined />}>
                    Navigation One
                </Menu.Item>
                <Menu.Item key="app" icon={<AppstoreOutlined />}>
                    Navigation Two
                </Menu.Item>
                <Menu.Item key="alipay">
                    <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
                        ant.design - Link
                    </a>
                </Menu.Item>
            </Menu>
            <Menu mode="horizontal" theme="dark">
                <Menu.SubMenu icon={<UserAddOutlined />} title="userInfo mess">
                    <Menu.Item key="setting:1">Option 1</Menu.Item>
                    <Menu.Item key="setting:2">Option 2</Menu.Item>
                </Menu.SubMenu>
            </Menu>
        </>
    )
}

export default MenuTop